<template>Mouse position is at: {{ x }}, {{ y }}</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, toRefs } from 'vue';

// Implement ...
function useEventListener(target: HTMLDocument, event: string, callback) {
  onMounted(() => {
    target.addEventListener(event, callback)
  })

  onUnmounted(() => {
    target.removeEventListener(event, callback)
  })
}

// Implement ...
function useMouse() {
  const obj = reactive({
    x: 0, y: 0
  })
  useEventListener(window, "mousemove", (e: EventTarget) => {
    obj.x = e.clientX
    obj.y = e.clientY
  })

  // reactive 转 ref
  return toRefs(obj)
}
const { x, y } = useMouse()
</script>
